<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="heard">
          <el-button type="primary" size="small" @click="dialogFormVisible = true">添加房产</el-button>
          <div class="right">
            <el-select v-model="search2" placeholder="全部分类">
              <el-option
                label="全部分类"
                value=""
              />
              <el-option
                v-for="item in fenleiList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="search1" placeholder="全部经纪">
              <el-option
                label="全部经纪"
                value=""
              />
              <el-option
                v-for="item in agentsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-input v-model="input" placeholder="请输入内容" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="searchFn" />
            </el-input>
          </div>
        </div>
        <el-table
          :data="fangchanList"
          border
          style="width: 100%"
        >
          <el-table-column
            label="封面"
            width="150"
          >
            <template v-slot="{row}">
              <el-image style="width: 100px; height: 100px" :src="row.image" />
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            prop="title"
            label="标题"
          />
          <el-table-column
            label="标签"
            width="100"
          >
            <template v-slot="{row}">
              <el-tag v-for="item in row.tags" :key="item">{{ item }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            width="150"
            prop="address"
            label="地址"
          />
          <el-table-column
            width="80"
            prop="category.title"
            label="分类"
          />
          <el-table-column
            width="80"
            prop="agent.name"
            label="经纪"
          />
          <el-table-column
            width="100"
            prop="price"
            label="价格"
          />
          <el-table-column
            width="100"
            prop="desc"
            label="介绍"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            width="150"
            label="图片"
          >
            <template v-slot="{row}">
              <el-image v-for="item in row.photos" :key="item" style="width: 50px; height: 50px" :src="item" />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
          >
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delFn(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          align="center"
          :total="total"
          :current-page="page"
          :page-size="limit"
          layout="prev, pager, next, total"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <comDialog ref="dialog" :res="res" :show-dialog.sync="dialogFormVisible" :agents-list="agentsList" :fenlei-list="fenleiList" @ok="getFangchanList(limit,page)" @total="getFangchanCount()" />
    </div>
  </div>
</template>

<script>
import { getFangchanList, getFangchanCount, getfenleiList } from '@/api/fangchan'
import { getAgentsList } from '@/api/agents'
import comDialog from './conponents/dialog.vue'
export default {
  components: { comDialog },
  data() {
    return {
      search1: '',
      search2: '',
      dialogFormVisible: false,
      input: '',
      fangchanList: [],
      limit: 5,
      page: 1,
      total: 0,
      agentsList: [],
      fenleiList: [],
      res: []
    }
  },
  created() {
    this.getFangchanList(this.limit, this.page)
    this.getFangchanCount()
    this.getAgentsList()
    this.getfenleiList()
  },
  methods: {
    // 获取房产列表
    async getFangchanList(limit, page, title, search1, search2) {
      this.fangchanList = await getFangchanList(limit, limit * (page - 1), title, search1, search2)
      console.log(this.fangchanList)
    },
    // 获取房产数量
    async getFangchanCount(limit, page, title, search1, search2) {
      this.total = await getFangchanCount(limit, page, title, search1, search2)
      console.log(this.total)
    },
    // 切换页数回调
    handleCurrentChange(page) {
      this.page = page
      this.getFangchanList(this.limit, this.page, this.title)
      this.getFangchanCount()
    },
    // 获取经纪列表
    async getAgentsList() {
      this.agentsList = await getAgentsList()
    },
    async getfenleiList() {
      this.fenleiList = await getfenleiList()
    },
    editFn(id) {
      this.dialogFormVisible = true
      this.$refs.dialog.editFn(id)
    },
    delFn(row) {
      this.$refs.dialog.delFn(row)
    },
    async searchFn() {
      
      if (!this.input && !this.search1 && !this.search2) {
        await this.getFangchanList(this.limit, this.page)
        await this.getFangchanCount(this.limit, this.page)
      } else if (!this.input && !this.search1) {
        await this.getFangchanList(this.limit, this.page, null, null, this.search2)
        await this.getFangchanCount(this.limit, this.page, null, null, this.search2)
      } else if (!this.input && !this.search2) {
        await this.getFangchanList(this.limit, this.page, null, this.search1, null)
        await this.getFangchanCount(this.limit, this.page, null, this.search1, null)
      } else if (!this.search1 && !this.search2) {
        await this.getFangchanList(this.limit, this.page, this.input, null, null)
        await this.getFangchanCount(this.limit, this.page, this.input, null, null)
      } else if (!this.input) {
        await this.getFangchanList(this.limit, this.page, null, this.search1, this.search2)
        await this.getFangchanCount(this.limit, this.page, null, this.search1, this.search2)
      } else if (!this.search1) {
        await this.getFangchanList(this.limit, this.page, this.input, null, this.search2)
        await this.getFangchanCount(this.limit, this.page, this.input, null, this.search2)
      } else if (!this.search2) {
        await this.getFangchanList(this.limit, this.page, this.input, this.search1, null)
        await this.getFangchanCount(this.limit, this.page, this.input, this.search1, null)
      }
    }
  }
}
</script>

<style >
  .heard{
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
  }
  .el-card{
    padding: 10px;
  }
  .input-with-select{
    width: 70%;
  }
  .right{
    width: 70%;
    float: right;
    display: flex;
  }
</style>
